


Interactive Work Style: Default with Inline Popups

by Sylvara (Silvara)



Category: No Fandom
Genre: A3O Tutorial, Interactive Work Skins, Other, for contextual author's comments, for dialogue translation
Language: English
Status: Completed
Published: 2018-09-27
Updated: 2018-09-27
Packaged: 2019-07-18 08:58:30
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 393
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/16115114
Author URL: https://archiveofourown.org/users/Silvara/pseuds/Sylvara
Summary: This style let you make text appear in a bubble, just like an inline popup. This example is designed for translation, but feel free to customize it for your own needs.Unfortunately, this doesn't support tactile devices yet.





	Interactive Work Style: Default with Inline Popups

**Author's Note:**

  * For [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/gifts).
  * Inspired by [How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)](https://archiveofourown.org/works/10957056) by [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 



> Point and stay over the feathers to make the inline popups appear. 
> 
> PS: **If the popup is flickering on and off, slide your pointer a bit to the right and it will stop.**

**Here is an idea of what this will let you do:**  
" _Mae govannen_ _Welcome_ and welcome to this A3O Work Skin tutorial, _cher lecteur_ _dear reader_.  
☺ Afterward, you should be able to write sentences like this.

  


1 ► To start, copy paste this in a new Work Skin:
    
    
    #workskin body {
      background-color: #FFF8F0;   
      color: black;   
      cursor: default;
    }
    
    #workskin p i.topic {
      border-color: #995200;   
      border-bottom-style: dotted;
      border-weight: 1px;
    }
    
    #workskin p i.note {
      font-style: normal;
      display: inline-block;
      width: 15px;
      height: 15px;
      line-height: 0em;
      color: transparent;
      overflow: hidden;
      background-image: url('https://orig00.deviantart.net/3bf0/f/2012/013/e/7/brown_feather_cutie_mark_by_kinnichi-d4m8q2s.png');   
      background-size: 15px 15px;
      background-position: right bottom;
      background-repeat: no-repeat;
    }
    
    #workskin p i.note:before {
      content: '';
    }
    
    #workskin p i.note:after {
      float: right;
      font-size: 7pt;
      margin-right: 2px;
    }
    
    #workskin p i.note.elvish:after {
      content: '| ELVISH [SINDARIN]';
    }
    
    #workskin p i.note.french:after {
      content: '| FRENCH';
    }
    
    #workskin p i.note.spanish:after {
      content: '| SPANISH'; 
    }
    
    #workskin p i.note:hover {
      display: inline;
      line-height: 1em;
      padding-left: 6px;
      padding-right: 6px;
      text-decoration: none;
      color: #995200;
      border: dashed #995200 1px;
      border-radius: 50px 50px 50px 1px;
      background-size: 0px 0px;
    }
    

2 ► Name it something like: 
    
    
    Default work style (supports popups)

  


3 ► Edit or create your creative work, using the selectors like this:  


In this sentence, you'll find a _< p><i class="reference">_word _< /i><i class="_language _note" >_translation _< /i> _and it's translation.

| 

In this sentence, you'll find a _word_ _translation_ and it's translation.  
  
---|---  
  
  
**NB** :  
• The parts in plain text must be **exactly the same** for the code to work.  
• Make sure to add a section in your Work Skin for every new language before using it in your chapters.  
• **Beware of the Rich Text Editor** when you edit a chapter using this css trick. Think about copying the content of the chapter in HTML before reverting to Rich Text. The Rich Text editor will ruin the HTML forever and you'll only be able to retrieve it by deleting everything and pasting the whole of it down again from your clipboard. Really my advise would be to stop reverting altogether from the moment you start adding popups to your chapter.  
• Consider notifying the reader that the interactive features of your stories will only work with the Creator's Style.

4 ► Save your work and you're done.

Now that you know how to use it, you can adjust colors, fonts and design to fit your story!

**Author's Note:**

> Thank you for your interest in this tutorial! ( _note_ _This also works in the Notes and Summary sections._ ).


End file.
